import {memo} from 'react';
import {ListWrapper, ListItem, List} from './style';
import {getCount} from '../../api/utils';
import Lazyload from 'react-lazyload';
import { withRouter } from "react-router-dom";

function RecommenList (props) {
    const {recommendList} = props

    const enterDetail = (id) => {
        props.history.push(`/recommend/${id}`)
    }

    return (
        <ListWrapper>
            <h1 className="title">推荐歌单</h1>
            <List>
                {
                    recommendList.map((item, index) => {
                        return (
                            <ListItem key={item.id + index} onClick={() => enterDetail(item.id)}>
                                <div className="img_wrapper">
                                    <div className="decorate"></div>
                                    <Lazyload placeholder={<div style={{width: '100%', height: '100%', backgroundColor: 'red'}}>占位图</div>}>
                                    <img src={item.picUrl + "?param=300x300"} width="100%" height="100%" alt="music"/>
                                    </Lazyload>
                                </div>
                                <div className="play_count">
                                    <i className="icon play">&#xe885;</i>
                        <span className="count">{getCount(item.playCount)}</span>
                                </div>
                        <div className="desc">{item.name}</div>
                            </ListItem>
                        )
                    })
                }
            </List>
        </ListWrapper>
    )
}

export default memo(withRouter(RecommenList))